<template>
  <div>
    <div>
      <my-main :arr="arr">
        <template #title>
          <h2>测试题</h2>
        </template>

        <template #main="{ item }">
          <span>{{ item.num1 }}</span>
          <span>+</span>
          <span>{{ item.num2 }}</span>
          <span>=</span>
          <input type="number" v-model="item.result" />
          <button @click.prevent="sum(item)" :disabled="item.submitted">
            提交
          </button>
        </template>
      </my-main>
    </div>
    <div>
      <my-footer :arr="arr">
        <template #footer>
          <span
            v-for="(item, id) in arr"
            :key="id"
            :class="{
              right: item.status === '正确',
              error: item.status === '错误',
              undo: item.status === '未完成',
            }"
            >{{ id + 1 }}: {{ item.status }}</span
          >
        </template>
      </my-footer>
    </div>
  </div>
</template>

<script>
import MyMain from './components/my-main.vue'
import MyFooter from './components/my-footer.vue'
export default {
  components: { MyMain, MyFooter },
  data() {
    return {
      arr: [
        {
          id: 1,

          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: '未完成',

          result: '1',

          submitted: false,
        },
        {
          id: 2,

          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: '未完成',

          result: '',

          submitted: false,
        },
        {
          id: 3,

          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: '未完成',

          result: '',

          submitted: false,
        },
        {
          id: 4,

          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: '未完成',

          result: '',

          submitted: false,
        },
        {
          id: 5,

          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: '未完成',

          result: '',

          submitted: false,
        },
      ],
    }
  },
  methods: {
    sum(item) {
      console.log(item)
      if (item.result == '') {
        return
      }

      if (
        item.result ==
        item.num1 + item.num2
      ) {
        item.status = '正确'

        item.submitted = true
      } else {
        item.status = '错误'
      }
    },
  },
}
</script>

<style scoped>
.subject {
  margin: 5px;

  padding: 5px;

  font-size: 20px;
}

.subject > span {
  display: inline-block;

  text-align: center;

  width: 20px;
}

.subject input {
  width: 50px;

  height: 20px;
}

.right {
  color: green;
}

.error {
  color: red;
}

.undo {
  color: #ccc;
}

body {
  background-color: #eee;
}

#app {
  background-color: #fff;

  width: 500px;

  margin: 50px auto;

  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

  padding: 2em;
}
</style>
